<template>
  <!-- 师资详情页 -->
  <div class="c-p c-bg-white">
    <div class="detail-bg">
      <div class="c-pl32 c-fc-white c-p c-flex-row c-justify-sb c-aligni-start c-pt30 c-pb64 c-w100 c-minh256 c-fs24 c-pb88">
        <div class="c-ww120 c-hh120 c-flex-row c-flex-center c-bg-white c-brp50 c-mr20" @click.stop="clickPreviewImage(teacherInfo.headimg)">
          <img class="c-wh116 c-brp50 c-center imgCloseBig" :src="$addXossFilter(teacherInfo.headimg, require('@/assets/defult_head.png'))" />
        </div>
        <div class="c-flex-row c-w0 c-flex-grow1 c-justify-sb">
          <div>
            <div>
              <div class="c-mr10 c-fs28 c-fw-b">{{teacherInfo.name}}</div>
              <div class="c-fs24 c-mt12 c-lh36">{{teacherInfo.title}}</div>
            </div>
            <div class="c-flex-row c-flexw-wrap c-aligni-center c-pt20 c-fs20 c-fc-sblack c-text-hidden">
              <span v-for="(item, i) in teacherLabel" :key="i" class="c-mr10 c-mb20 c-br20 c-ph10 c-hh28 c-lh28 c-bg-white booking-tag c-opacity80">{{item}}</span>
            </div>
          </div>
        </div>
        <div class="c-ww100 c-hh50 c-br-tl24 c-br-bl24 c-bg-white booking-tag c-fw-b c-lh50 c-textAlign-c c-ml20" @click=goBooking>预约</div>
      </div>
      <div class="c-flex-row c-fs24 c-bg-white c-ww600 c-pv20 c-br16 c-box-shadow3 c-ph40 c-justify-sb c-fc-sblack c-pa detail-price">
        <div class="c-flex-column c-aligni-center c-justify-center c-ww120">
          <span class="c-fc-xblack c-fs26 c-fw-b c-ws-n" v-if="teacherInfo.price != 0">{{'￥' | iosPriceFilter}}{{teacherInfo.price}}</span>
          <span v-else class="c-fc-xblack c-fs26 c-fw-b">免费</span>
          <span class="c-mt8">消费价格</span>
        </div>
        <div class="c-flex-column c-aligni-center c-justify-center c-ww120">
          <span class="c-fc-xblack c-fs26 c-fw-b">{{info.enrolls}}</span>
          <span class="c-mt8">预约人数</span>
        </div>
        <div class="c-flex-column c-aligni-center c-justify-center c-ww120">
          <span class="c-fc-xblack c-fs26 c-fw-b">{{info.score}}</span>
          <span class="c-mt8">评分</span>
        </div>
      </div>
    </div>
    <div class="c-w100 c-ph24 c-pt90 c-fs26 c-pb48" :class="teacherInfo.desc != '' || commentList.length != 0 ? 'c-bd-b10' : '' " v-if="teacherInfo.address">
      <div class="c-p c-inlineblack c-mb40">
        <div class="c-fw-b c-fc-xblack c-p">联系地址</div>
        <div class="c-w100 c-hh6 c-pa c-p-b0 c-p-l0 title-bg"></div>
      </div>
      <div class="c-flex-row c-aligni-center c-justify-sb">
        <div class="c-fs28 c-fc-xblack c-text-ellipsis1">{{teacherInfo.address}}</div>
        <img @click="clickLocation" v-if="teacherInfo.lat != null && teacherInfo.lng != null" class="c-ww32" src="@/assets/i/wap/booking/map.png" alt="">
      </div>
    </div>
    <div class="c-ph24 c-fs26 c-fc-sblack" :class="[teacherInfo.detail != '' ? 'c-bd-b10' : '', teacherInfo.address == '' ? 'c-pt90 c-pb48' : 'c-pb30 c-pt50' ]" v-if="teacherInfo.desc != '' && teacherInfo.desc != null">
      <div class="c-p c-inlineblack c-mb40">
        <div class="c-fw-b c-fc-xblack c-p">简介</div>
        <div class="c-w100 c-hh6 c-pa c-p-b0 c-p-l0 title-bg"></div>
      </div>
      <div class="c-lh40 c-p c-ws-pw c-ww-bw" @click="showMore">
        <span ref="desc" :class="isOverFlow && isShowMore == false ? 'c-text-ellipsis3' : ''">{{teacherInfo.desc}}
          <span class="iconfont c-fs20" v-if="isOverFlow && isShowMore">&#xe6ab;</span>
        </span>
        <span class="iconfont c-fs20 c-pa p-bm6 c-p-r6" v-if="isOverFlow && isShowMore == false">&#xe6a9;</span>
      </div>
    </div>
    <div class="c-ph24 c-fs26 c-fc-sblack" :class="[commentList.length != 0 ? 'c-bd-b10' : '', teacherInfo.address == '' && teacherInfo.desc == '' ? 'c-pt90 c-pb48' : 'c-pb30 c-pt50']" v-if="detailList.length > 0 || (teacherInfo.detail != '' && teacherInfo.detail != null)">
      <div class="c-p c-inlineblack c-mb40">
        <div class="c-fw-b c-fc-xblack c-p">详情</div>
        <div class="c-w100 c-hh6 c-pa c-p-b0 c-p-l0 title-bg"></div>
      </div>
      <section>
        <div v-if="isArray">
          <div v-for="(item,index) in detailList" :key="index">
            <!-- 文本内容 -->
            <div v-if="item.type == 1" id="descParent" @click="clickDesc" class="tinymce-text c-wb-ba c-contexty-scroll" :class="[cfg.isCopyPicture == 0 ? 'closeBig' : 'aCloseBig', cfg.isCopy == 0 ? 'copyNot' : '']" v-html="item.content"></div>
            <!-- 音频内容 -->
            <div v-else-if="item.type == 3" class="c-pt20">
              <aplayer @play="playAplayer" preload="auto" :volume="1" repeat="repeat-one" :music="{
                artist:' ',
                title: item.title,
                src: isiOS ? item.audioM3u8 : item.audioM4a,
                pic: none,
              }" />
            </div>
            <!-- 视频内容 -->
            <div v-else-if="item.type == 2" class="c-pt20">
              <div :id='"myVideo" + index' class="clock-video c-pz1 c-w100-im" style="width:100%; height:auto;"></div>
            </div>
          </div>
        </div>
        <div v-else>
          <div class="c-lh40" v-html="detail"></div>
        </div>
      </section>
    </div>
    <div class="c-pv30 c-pt50 c-ph24 c-fs26 c-fc-xblack" v-if="commentList.length != 0" :class="teacherInfo.detail==''&&teacherInfo.desc==''&&teacherInfo.address==''?'c-pt90':''">
      <div class="c-p c-inlineblack c-mb40">
        <div class="c-fw-b c-p">用户评价</div>
        <div class="c-w100 c-hh6 c-pa c-p-b0 c-p-l0 title-bg"></div>
      </div>
      <div>
        <div class="c-flex-row c-justify-sb c-mb64" v-for="(item, i) in commentList" :key="i">
          <img class="c-hh70 c-ww70 c-brp50 c-center imgCloseBig c-mr20" :src="$addXossFilter(item.headimgurl, require('../../../assets/defult_head.png'))" />
          <div class="c-flex-grow1">
            <div class="c-flex-row c-justify-sb">
              <div class="c-fw-b c-flex-row c-aligni-center">
                <div>{{nameLength(item.nickname, 2)}}</div>
                <div class="c-fs18 c-ww60 c-hh30 c-vcAlign-middle c-flex-row c-flex-center c-bg-mb1-orange c-fc-white c-br6 c-ml20" v-if="item.handpick == 1">精选</div>
              </div>
              <div class="c-fc-gray">评分：{{item.score}}</div>
            </div>
            <div class="c-fs22 c-fc-gray c-mt20 c-pb36">{{item.createdAt}}</div>
            <div>{{item.content}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { utilJs, wxUtilJs } from "@/utils/common.js"
import VueAPlayer from "@/plugin/vue-aplayer/vue-aplayer.vue";
import { getXgplayer, destoryPlayer } from "@/utils/xgplayerJs.js";
let inputScrollTop = 0;
export default {
  name: "BookingDetail",
  components: {
    Aplayer: VueAPlayer
  },
  data() {
    return {
      isiOS: navigator.userAgent.indexOf('IOSLogin') > -1 || navigator.userAgent.indexOf('IOSNewLogin') > -1 || navigator.userAgent.indexOf("IOSNewApp") > -1,
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : "mb5_default",
      themeName: localStorage.getItem("themeName") ? localStorage.getItem("themeName") : "mb5",
      cfg: JSON.parse(localStorage.getItem("cfg")),
      isLoading: false,
      atId: '',
      teacherInfo: [],
      commentList: [],
      goodTemplates: [],
      badTemplates: [],
      info: '',
      commentText: '',
      rate: 0,
      type: 0,
      isOverFlow: false, //是否超过3行
      isArray: false,
      detailList: [],
      isShowMore: false,
      tenObj: null,
    }
  },
  created() {
    utilJs.appShare(this);
  },
  watch: {
    rate: function (val, oldVal) {
      if (val == 5) {
        for (let val of this.badTemplates) {
          val.isChoosed = false;
        }
        this.choosedBadTemp = '';
        this.commentText = '';
      } else if (oldVal == 5 && (val == 1 || val == 2 || val == 3 || val == 4)) {
        for (let val of this.goodTemplates) {
          val.isChoosed = false;
        }
        this.choosedGoodTemp = '';
        this.commentText = '';
      }
    }
  },
  activated() {
    this.isLoading = false;
    this.companyAuth = JSON.parse(localStorage.getItem("companyAuth"));
    setDocumentTitle("预约");
    this.atId = this.$route.query.atId || "";
    this.aeId = this.$route.query.aeId || "";
    this.teacherInfo = [];
    this.teacherLabel = [];
    this.commentList = [];
    this.goodTemplates = []; //满意的评价模板
    this.badTemplates = []; //不满意的评价模板
    this.detailList = [];
    this.commentText = ''; //评论文本
    this.choosedGoodTemp = ''; //选中的满意评价模板
    this.choosedBadTemp = ''; //选中的不满意评价模板
    this.rate = 0;
    this.type = 0; //1好评 2差评
    this.isOverFlow = false;
    this.isArray = false;
    this.isShowMore = false;
    this.getInfo();
    this.wechatShare();
    window.scrollTo(0, 0);
  },
  methods: {
    // 查看放大图片
    clickPreviewImage(image) {
      let imgArr = [];
      imgArr.push(image);
      wxUtilJs.previewImage({
        current: image, // 当前显示图片的http链接
        urls: imgArr // 需要预览的图片http链接列表
      });
    },
    clickLocation() {
      if (Number(this.teacherInfo.lat) <= 0 && Number(this.teacherInfo.lng) <= 0) {
        return;
      }
      let $this = this;
      wxUtilJs.openLocation({
        latitude: parseFloat($this.teacherInfo.lat), // 纬度，浮点数，范围为90 ~ -90
        longitude: parseFloat($this.teacherInfo.lng), // 经度，浮点数，范围为180 ~ -180。
        name: "", // 位置名
        address: $this.teacherInfo.address, // 地址详情说明
        scale: 28, // 地图缩放级别,整形值,范围从1~28。默认为最大
        infoUrl: "" // 在查看位置界面底部显示的超链接,可点击跳转
      });
    },
    //   获取师资信息
    getInfo() {
      if (!this.isLoading) {
        this.isLoading = true;
        let $this = this;
        // type 1师资详情页 2预约时间页
        utilJs.getMethod(`${global.apiurl}appointment/getTeacherInfo?atId=${this.atId}&type=1`, res => {
          $this.isLoading = false;
          $this.info = res;
          if (res.statusCode) {
            this.$routerGo(this, "replace", {
              path: `/error/emptyPage?info=该资源已下线&from=booking`
            });
          } else {
            $this.teacherLabel = res.labels;
            $this.teacherInfo = res.teacherInfo;
            $this.detail = res.teacherInfo.detail;
            if ($this.detail && $this.detail.length > 0 && Array.isArray($this.detail)) {
              this.isArray = true
              for (let i = 0; i < $this.detail.length; i++) {
                if ($this.detail[i].type == 1 && $this.detail[i].content && $this.detail[i].content.substr(0, 4) == 'http' && $this.detail[i].content.length > 5) {
                  let ic = $this.detail[i].content;
                  $this.detail[i].content = '';
                  utilJs.getPageHtml(ic, sres => {
                    $this.detail[i].content = sres
                  }, () => {
                    $this.detail[i].content = '';
                  })
                }
              }
              $this.detailList = $this.detail.filter((item) => {
                return item.assetStatus == 1 || item.assetStatus == null;
              });
              for (let i = 0; i < $this.detailList.length; i++) {
                if ($this.detailList[i].type == 2) {
                  $this.$nextTick(() => {
                    this.initTcPlayer(i, $this.detailList[i].content, $this.detailList[i].videoM3u8, $this.detailList[i].videoCover);
                  });
                }
              }
            }
            $this.getComments();
            $this.wechatShare();
          }
          this.$nextTick(() => {
            if (this.$refs.desc.offsetHeight > 69) {
              this.isOverFlow = true;
            } else {
              this.isOverFlow = false;
            }
          })
        }, failRes => {
          $this.isLoading = false;
        });
      }
    },
    //   获取评论列表
    getComments() {
      if (!this.isLoading) {
        this.isLoading = true;
        let $this = this;
        utilJs.getMethod(`${global.apiurl}appointment/getCommentList?atId=${this.atId}&limit=10&page=1`, res => {
          $this.isLoading = false;
          $this.commentList = res.data;
          if ($this.showComment) {
            $this.getTemplate();
          }
        }, failRes => {
          $this.isLoading = false;
        });
      }
    },
    // 获取评论模板
    getTemplate() {
      if (!this.isLoading) {
        this.isLoading = true;
        let $this = this;
        utilJs.getMethod(`${global.apiurl}commentTemplate?prodType=86&levels[]=1&levels[]=2`, res => {
          $this.isLoading = false;
          $this.goodTemplates = res[0].comments;
          $this.badTemplates = res[1].comments;
          let tagList = [];
          for (let key of $this.goodTemplates) {
            let isChoosed = false;
            let item = {
              content: key.content,
              ctId: key.ctId,
              isChoosed: isChoosed
            }
            tagList.push(item);
          };
          $this.goodTemplates = tagList;
          let tagList1 = [];
          for (let key of $this.badTemplates) {
            let isChoosed = false;
            let item = {
              content: key.content,
              ctId: key.ctId,
              isChoosed: isChoosed
            }
            tagList1.push(item);
          };
          $this.badTemplates = tagList1;
        }, failRes => {
          $this.isLoading = false;
        });
      }
    },
    // 选择评论模板
    chooseTag(content, i, isChoosed, type) {
      this.type = type;

      if (type == 1) {
        this.goodTemplates[i].isChoosed = !isChoosed;
        if (this.goodTemplates[i].isChoosed) {
          if (this.commentText == "") {
            this.commentText = content;
          } else {
            this.commentText = this.commentText + "," + content;
          }
        } else {
          if (this.commentText.indexOf("," + content) > -1) {
            this.commentText = this.commentText.replace("," + content, "");
          } else {
            this.commentText = this.commentText.replace(content, "");
          }
        }
      } else {
        this.badTemplates[i].isChoosed = !isChoosed;
        if (this.badTemplates[i].isChoosed) {
          if (this.commentText == "") {
            this.commentText = content;
          } else {
            this.commentText = this.commentText + "," + content;
          }
        } else {
          if (this.commentText.indexOf("," + content) > -1) {
            this.commentText = this.commentText.replace("," + content, "");
          } else {
            this.commentText = this.commentText.replace(content, "");
          }
        }
        // this.commentText = this.choosedBadTemp;
      }
    },
    // 提交评论
    submitComment() {
      if (this.isLoading) {
        return;
      }
      let $this = this;
      if ($this.rate == 0) {
        $this.$showCjToast({
          text: "请完成评分",
          type: "warn",
        });
        return;
      }
      let data = {
        atId: $this.atId,
        aeId: $this.aeId,
        score: Number($this.rate * 2),
        content: $this.commentText
      };
      $this.isLoading = true;
      utilJs.postMethod(`${global.apiurl}appointment/createComment`, data, function (res) {
        $this.isLoading = false;
        $this.getComments();
        $this.showComment = false;
        $this.$showCjToast({
          text: "评论成功",
          type: "success"
        });
      },
        failRes => {
          $this.isLoading = false;
        });
    },
    goBooking() {
      this.$routerGo(this, "push", {
        path: `/homePage/booking/bookingTime?atId=${this.atId}`
      });
    },
    //IOS微信6.7以上版本会导致输入法收起的时候，键盘没收起，需要手动滚下屏幕
    inputFocus() {
      if (navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
        inputScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      }
    },
    inputBlur() {
      if (navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
        setTimeout(() => {
          document.body.scrollTop = inputScrollTop - 1 || 0;
        });
      }
    },
    showMore() {
      this.isShowMore = !this.isShowMore;
    },
    clickDesc(e) {
      if (e.target.tagName == 'IMG' && e.target.src) {
        wxUtilJs.previewImage({
          current: e.target.src, // 当前显示图片的http链接
          urls: [e.target.src] // 需要预览的图片http链接列表
        });
      }
    },
    playAplayer(src) {
      if (typeof src == 'string') {
        let arr = document.getElementsByTagName("video");
        for (let i = 0; i < arr.length; i++) {
          if (arr[i].src !== src) {
            arr[i].pause();
          }
        }
      }
    },
    initTcPlayer(index, mp4Url, videoM3u8, poster) {
      if (mp4Url == '' || mp4Url == null) {
        mp4Url = videoM3u8 ? videoM3u8 : '';
      }
      if (videoM3u8 == '' || videoM3u8 == null) {
        videoM3u8 = mp4Url ? mp4Url : '';
      }
      let videoObj = {
        videoMp4: mp4Url,
        videoM3U8: videoM3u8,
        autoplay: false,
        fluid: false,
        isCssFullScreen: true,
        poster: poster || 'https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/clockIn/video-bg2.png',
      }
      let dId = 'myVideo' + index;
      this.tenObj = getXgplayer(dId, videoObj);
    },
    nameLength(name, length) {
      return utilJs.nameLength(name, length)
    },
    //分享
    wechatShare: function () {
      let title = this.teacherInfo.name;
      let shareImg = this.teacherInfo.headimg;
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?atId=${this.atId}&refereeId=${localStorage.getItem("userId")}`;
      let shareDesc = this.teacherInfo.desc;
      utilJs.wechatConfig(shareUrl, title, shareImg, shareDesc, function () { }, true);
    },
    //手机端分享
    appShare: function () {
      let title = this.teacherInfo.name;
      let shareImg = this.teacherInfo.headimg;
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?atId=${this.atId}&refereeId=${localStorage.getItem("userId")}`;
      let shareDesc = this.teacherInfo.desc;
      utilJs.appShareTrue(title, shareImg, shareUrl, shareDesc);
    },
  },
  deactivated() {
    this.tenObj && destoryPlayer(this.tenObj);
    this.tenObj = null;
  },
}
</script>

<style scoped>
html,
body {
  height: 100%;
  width: 100%;
  overflow-y: hidden;
}
.booking-tag {
  color: #5491ff;
}
.c-wh116 {
  width: 2.9rem;
  height: 2.9rem;
}
.c-minh256 {
  min-height: 6.4rem;
}
.detail-bg {
  background: url("../../../assets/i/bg-blue.png") 100%;
  position: relative;
}
.detail-price {
  bottom: -1rem;
  left: 50%;
  margin-left: -7.5rem;
}
.time-list {
  background: #f5f6f6;
}
.textarea {
  background-color: #fafafa;
}
.theme-back {
  background: #5491ff;
}
.c-mr-24 {
  margin-right: -0.6rem;
}
.title-bg {
  background: rgba(84, 145, 255, 0.5);
}
.p-bm6 {
  bottom: -0.15rem;
}
.closeBig >>> p > img,
.closeBig >>> section > img,
.closeBig >>> div > img,
.closeBig >>> img {
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none;
}
.aCloseBig >>> p > a > img,
.aCloseBig >>> section > a > img,
.aCloseBig >>> div > a > img {
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none;
}
</style>
